<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://kzw.com/functions" prefix="kfn"%>
<c:set var="path" value="${pageContext.request.contextPath}"/>

<!DOCTYPE html>
<html>
<head>
  <base href="${path}/pages/">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <title>文章列表</title>
  <link rel="stylesheet" type="text/css" href="../res/layui/css/layui.css">
  <link rel="stylesheet" type="text/css" href="../res/css/main.css">
<!--加载meta IE兼容文件-->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
  <div class="header">
    <div class="menu-btn">
      <div class="menu"></div>
    </div>
    <h1 class="logo">
      <a href="index.html">
        <span>MYBLOG</span>
        <img src="../res/img/logo.png">
      </a>
    </h1>
    <div class="nav">
      <a href="index.html" class="active">文章</a>
      <a href="whisper.html">微语</a>
      <a href="leacots.html">留言</a>
      <a href="album.html">相册</a>
      <a href="about.html">关于</a>
    </div>
    <ul class="layui-nav header-down-nav">
      <li class="layui-nav-item"><a href="index.html" class="active">文章</a></li>
      <li class="layui-nav-item"><a href="whisper.html">微语</a></li>
      <li class="layui-nav-item"><a href="leacots.html">留言</a></li>
      <li class="layui-nav-item"><a href="album.html">相册</a></li>
      <li class="layui-nav-item"><a href="about.html">关于</a></li>
    </ul>
    <p class="welcome-text">
      欢迎来到<span class="name">小明</span>的博客~
    </p>
  </div>

  <div class="banner">
    <div class="cont w1000">
      <div class="title">
        <h3>MY<br />BLOG</h3>
        <h4>well-balanced heart</h4>
      </div>
      <div class="amount">
        <p><span class="text">访问量</span><span class="access">1000</span></p>
        <p><span class="text">日志</span><span class="daily-record">1000</span></p>
      </div>
    </div>
  </div>

  <div class="content">
    <div class="cont w1000">
      <div class="title">
      
        <span class="layui-breadcrumb" lay-separator="|">
         	<c:forEach var="d" items="${kfn:dict('文章类型')}" varStatus="idx">         		
      			<a href="javascript:;" <c:if test="${idx.first}">class="active"</c:if>>${d.itemValue}</a>
      		</c:forEach>   
        </span>
        
      </div>
      
      <!-- 内容列表 -->
      <div class="list-item" id="main_list"></div>
      
      <!-- 分页栏 -->
      <div id="demo" style="text-align: center;"></div>
      
    </div>
  </div>

  <div class="footer-wrap">
    <div class="footer w1000">
      <div class="qrcode">
        <img src="../res/img/erweima.jpg">
      </div>
      <div class="practice-mode">
        <img src="../res/img/down_img.jpg">
        <div class="text">
          <h4 class="title">我的联系方式</h4>
          <p>微信<span class="WeChat">1234567890</span></p>
          <p>手机<span class="iphone">1234567890</span></p>
          <p>邮箱<span class="email">1234567890@qq.com</span></p>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 自定义模板 -->
  <script type="text/html" id="article_list">
	{{#  layui.each(d.data, function(index, item){ }}
		<div class="item">
          <div class="layui-fluid">
            <div class="layui-row">
              <div class="layui-col-xs12 layui-col-sm4 layui-col-md5">
                <div class="img"><img src="{{item.titlePic}}" alt=""></div>
              </div>
              <div class="layui-col-xs12 layui-col-sm8 layui-col-md7">
                <div class="item-cont">
                  <h3>{{item.title}}<button class="layui-btn layui-btn-danger new-icon">new</button></h3>
                  <h5>{{item.type.itemValue}}</h5>
                  <p>{{item.text}}</p>
                  <a href="${path}/action/article/view?id={{item.id}}" class="go-icon"></a>
                </div>
            </div>
            </div>
           </div>
        </div>
	{{# })  }}
  </script>
  
  <script type="text/javascript" src="../res/layui/layui.js"></script>  
  <script type="text/javascript">
    layui.use(['element','laypage','jquery', 'laytpl'], function(){
      	var element = layui.element;
      	var laypage = layui.laypage;
      	var $ = layui.$;
      	var laytpl = layui.laytpl;
      	var count;
      	
      	// 使用ajax加载数据，然后渲染数据（模板技术）
      	loadPage = function(curr) {
      		$.ajax({
      			async: false, //同步
      			url: '${path}/action/article/list',
      			data: {limit:5, page:curr},
      			dataType: 'json',
      			success: function(data) {
      				count = data.count;
      				var tpl = $('#article_list').html();
              		laytpl(tpl).render(data, function(html) {
              			$('#main_list').html(html);
              		});
      			}      			
      		});	
      	}
      	loadPage(1);
      	
     	// 分页
  		laypage.render({
    		elem: 'demo',
    		count: count,
    		limit: 5,
    		jump: function(obj, first) {
    			if(!first) {
    				loadPage(obj.curr);
    			}
    		}
  		});
     	
    });
  </script>
</body>
</html>